<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <template #header>
            <h3>仪表板</h3>
          </template>
          <p>欢迎回来，{{ user?.username }}！</p>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="stats">
      <el-col :span="6">
        <el-card class="stat-card">
          <el-statistic title="已完成考试" :value="5" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <el-statistic title="平均分数" :value="85" suffix="分" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <el-statistic title="学习时长" :value="120" suffix="小时" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <el-statistic title="完成率" :value="92" suffix="%" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="16">
        <el-card>
          <template #header>
            <h3>最近考试</h3>
          </template>
          <el-table :data="recentExams" style="width: 100%">
            <el-table-column prop="name" label="考试名称" />
            <el-table-column prop="date" label="日期" />
            <el-table-column prop="score" label="分数" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="scope.row.status === 'completed' ? 'success' : 'warning'">
                  {{ scope.row.status === 'completed' ? '已完成' : '进行中' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <h3>快速操作</h3>
          </template>
          <div class="quick-actions">
            <el-button type="primary" style="width: 100%; margin-bottom: 10px;">
              开始新考试
            </el-button>
            <el-button style="width: 100%; margin-bottom: 10px;">
              查看成绩
            </el-button>
            <el-button style="width: 100%;">
              个人设置
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const user = ref(null)

const recentExams = ref([
  {
    name: '数学期末考试',
    date: '2025-11-10',
    score: 92,
    status: 'completed'
  },
  {
    name: '英语听力测试',
    date: '2025-11-08',
    score: 88,
    status: 'completed'
  },
  {
    name: '物理期中考试',
    date: '2025-11-05',
    score: 85,
    status: 'completed'
  }
])

onMounted(() => {
  const userData = localStorage.getItem('user')
  if (userData) {
    user.value = JSON.parse(userData)
  }
})
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.stats {
  margin: 20px 0;
}

.stat-card {
  text-align: center;
}

.quick-actions {
  display: flex;
  flex-direction: column;
}

h3 {
  margin: 0;
  color: #303133;
}
</style>